<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>EasyMS™</title>
    <link href="/h5/img/easyms.ico" rel="icon" type="image/x-icon">
    <link href="/h5/plugin/jquery-easyui-1.9.4/themes/material-teal/easyui.css" rel="stylesheet" type="text/css"/>
    <link href="/h5/plugin/jquery-easyui-1.9.4/themes/icon.css" rel="stylesheet" type="text/css"/>
    <style>


        /*蓝色:#2196f3*/
        /*黑色:#23262E*/

        body {
            overflow: hidden;
        }

        .loginContent {
            width: 300px;
            height: 500px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .contentHead {
            height: 140px;
        }

        .contentForm {
            height: 250px;
        }

        .contentFoot {
            height: 110px;
            padding-top: 20px;
            color: #23262E;
            text-align: center;
            font-size: 14px;
        }

        .contentFoot a {
            color: #23262E;
        }

        .contentFoot a:hover, a:link, a:visited {
            color: #23262E;
        }


        #submitBtn {
        	color: #F3F3F3;
            border: 1px solid #23262E;
            background: #23262E;
            
            /*color: #117fd1;
            border-color: #117fd1;
            background: #F3F3F3;*/
            /*background: -webkit-linear-gradient(top, #F3F3F3 0, #F1F1F1 100%);
            background: -moz-linear-gradient(top, #F3F3F3 0, #F1F1F1 100%);
            background: -o-linear-gradient(top, #F3F3F3 0, #F1F1F1 100%);
            background: linear-gradient(to bottom, #F3F3F3 0, #F1F1F1 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F3F3F3, endColorstr=#F1F1F1, GradientType=0);*/

        }

        #submitBtn:hover {
            /*color: #F3F3F3;
            border: 1px solid #23262E;
            background: #23262E;*/
        }

        .loginTextbox{
            /*border: 1px solid #117fd1;*/
        }

    </style>
    <script src="/h5/plugin/jquery-easyui-1.9.4/jquery.min.js" type="text/javascript"></script>
    <script src="/h5/js/three.js" type="text/javascript"></script>
    <script src="/h5/plugin/jquery-easyui-1.9.4/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/h5/plugin/jquery-easyui-1.9.4/plugins/jquery.international.js" type="text/javascript"></script>
    <script src="/index/easyuiLanguagePack" type="text/javascript"></script>
    <script src="/index/languagePack/index/index" type="text/javascript"></script>
    <script src="js/easyms/easyms.js" type="text/javascript"></script>
    <script src="js/easyms/easyms.ajax.js" type="text/javascript"></script>
    <script src="js/easyms/easyms.const.js" type="text/javascript"></script>
    <script type="text/javascript">

    $(function () {

        // 加载版本信息
        $("#version").load(API_URL+"/index/getVersion");

        setPromptForTextbox("account", lang.account);
        setPromptForTextbox("password", lang.password);
        setEuButtonText("submitBtn", lang.login);

        let langList = [
            {value:"zh_CN",text:"中文（简体）"},
            {value:"zh_TW",text:"中文（繁體）"},
            {value:"en",text:"English"}
        ];
        loadCombobox("langSelector",langList,onLanguageChange);

        let language = getCookie(LANG_KEY);
        if(language == null || language == ""){
            setCookie(LANG_KEY,"zh_CN");
        }
        setValue4Combobox("langSelector",getCookie(LANG_KEY));

        setEuButtonText("savePwdBtn", langCommon.confirm);
        setEuButtonText("closePwdSetBtn", langCommon.back);
        setText("pwdOldTag", lang.pwdOld);
        setText("pwdNewTag", lang.pwdNew);
        setText("pwdRetype", lang.pwdRetype);
        addKeyListener(13, login);

    });

        // 登陆按钮
        function login() {
            removeErrorMsg();

            let account = getEUTextboxValue("account");
            if(account == null || "" == account){
                showErrorMsg(lang.message.nullAccount);
                return ;
            }
            let password = getEUTextboxValue("password");
            if(password == null || "" == password){
                showErrorMsg(lang.message.nullPassword);
                return ;
            }
            setEuButtonText("submitBtn", lang.checking);
            setEuButtonDisabled("submitBtn", true);
            let params = {account: account, password: password};
            ajaxPostBodyAndReturn("/index/loginCheck", params, successCallback,errorCallback);
        }

        // 登陆成功
        function successCallback(data) {
            // 保存token
            token = data.token;
            setCookie(TOKEN_KEY, data.token);

            // 更新语言设置
            ajaxGetAndReturn("/api/auth/user/getCurrentUser", {}, function (data) {
                setCookie(LANG_KEY, data.language);
            });

            // 检查是否修需要改密码
            if (data.pwdStatus != PWD_STATUS.NORMAL) {
                rePassword(data.pwdStatus);
            } else {
                setEuButtonText("submitBtn", lang.jumping);
                window.location.href = "/h5/module/main.html";
            }
        }

        // 登陆失败
        function errorCallback(data){
            console.log(data);
            // 登陆失败
            setEuButtonText("submitBtn", lang.login);
            setEuButtonDisabled("submitBtn", false);
            showErrorMsg(data.message);
        }

        // 修改密码逻辑
        function rePassword(pwdStatus) {
            // 需要修改密码
            let reasonStr = "";
            switch (pwdStatus) {
                // 修改原因：默认密码
                case PWD_STATUS.DEFAULT :
                    reasonStr = lang.message.defaultPwd;
                    break;
                // 修改原因：密码过期
                case PWD_STATUS.EXPIRE :
                    reasonStr = lang.message.expiredPwd;
                    break;
            }
            openModifyPasswordDialog(reasonStr);
        }

        // 打开修改密码面板
        function openModifyPasswordDialog(title) {
            euTextboxRemoteValidate("PASSWORD_OLD", "/api/auth/user/checkPassword", "password", lang.message.errorPwd);
            openDialog("modifyPwdDlg", title);
        }

        // 关闭修改密码面板
        function closePasswordModifyDialog() {
            setEuButtonText("submitBtn", lang.login);
            setEuButtonDisabled("submitBtn", false);
            resetFrom("modifyPwdForm");
            closeDialog("modifyPwdDlg");
        }

        // 修改密码
        function savePwd() {
            if (!formValidate("modifyPwdForm")) {
                return;
            }
            let newPwd = getEUTextboxValue("PASSWORD_NEW");
            let oldPwd = getEUTextboxValue("PASSWORD_OLD");
            ajaxPostBodyAndCallback("/api/auth/user/changePassword", {newPwd: newPwd, oldPwd: oldPwd}, function (data) {
                    window.location.href = "/h5/module/main.html";
            });
        }

        // 显示登陆失败提示信息
        function showErrorMsg(errorMsg) {
            insertHTML("errorMsg", '<span style="height: 18px;width:18px;float:right" class="warning"></span>');
            $('#errorMsg').tooltip({
                position: 'right',
                showDelay: 0,
                content: '<span style="color:#F4004B">' + errorMsg + '</span>'
            });
            $('#errorMsg').tooltip("show");
        }

        // 移除错误信息
        function removeErrorMsg() {
            emptyHTML("errorMsg");
            $('#errorMsg').tooltip("hide");
        }

        /**
         * 语言改变
         * @param newValue
         * @param oldValue
         */
        function onLanguageChange(record) {
            console.log(record);
            if (record == null || record.value == null) {
                return;
            }
            let language = getCookie(LANG_KEY);
            if(language != record.value){
                showProgress(langCommon.info,lang.message.switchingLang);
                setCookie(LANG_KEY,record.value);
                location.href = "/h5/index.html";
            }
        }

        $.extend($.fn.validatebox.defaults.rules, {
            equals: {
                validator: function (value, param) {
                    return value == $(param[0]).val();
                },
                message: lang.message.errRetypePwd
            },
            complexity: {
                validator: function (value, param) {
                    let reg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$)^.{8,16}$/;
                    return reg.test(value);
                },
                message: lang.message.errPwdFormat
            }
        });

    </script>
</head>
<body>
<div class="loginContent">
    <div class="contentHead">
<!--        <div class="easyms-logo-small" style="width: 60px;height: 60px;margin: 0 auto;"></div>-->
        <div class="easyms-title" style="height: 91px;"></div>
<!--        <div class="easyms-title2" style="height: 30px"></div>-->
    </div>
    <div class="contentForm">
        <form id="loginForm" method="post">
            <div id="errorMsg" style="height: 20px;"></div>
            <div style="margin-top: 10px;">
                <input class="easyui-textbox" data-options="height:40,
                       width:300,iconCls:'login-icon-user',iconAlign:'left',iconWidth:38,prompt:'',cls:'loginTextbox'" id="account"
                       name="account">
            </div>
            <div style="margin-top: 20px;">
                <input class="easyui-passwordbox" data-options="height:40,width:300,iconAlign:'left',showEye:true,iconWidth:38,prompt:'',cls:'loginTextbox'" id="password"
                       name="password">
            </div>
            <div style="margin-top: 20px;">
                <a class="easyui-linkbutton" href="#" id="submitBtn" onclick="login()"
                   style="width: 300px;height: 38px;">
                </a>
            </div>
        </form>
    </div>
    <div class="contentFoot">
        <span>EasyMS&trade;&nbsp;</span>
        <span>&nbsp;</span>
        <span id="version"></span>
        <span>&nbsp;</span>
        <input class="easyui-combobox" id="langSelector" name="language" data-options="editable:false,panelHeight:100" style="width:120px;height:18px;" />
        <span>&nbsp;</span>
        <br><br>
        <a href="#" style="color: #23262E">湖南工学院&nbsp;软件1601-廖略辉&nbsp;毕业设计作品&nbsp;</a>
        <a href="https://gitee.com/liaolvehui/easyms" style="color: #23262E" target="_blank">https://gitee.com/liaolvehui/easyms</a>
    </div>
</div>

<div buttons="#modifyPwdBlg-btn" class="easyui-dialog"
     data-options="iconCls:'icon-edit',modal:true,closed:true" id="modifyPwdDlg">
    <form id="modifyPwdForm" method="post">
        <table cellspacing="2px">
            <tr>
                <td><span id="pwdOldTag" style="width:100px"></span></td>
                <td>
                    <input class="easyui-passwordbox" iconWidth="28" id="PASSWORD_OLD" name="PASSWORD_OLD"
                           style="width:400px;height:34px;padding:10px">
                </td>
            </tr>
            <tr>
                <td id="pwdNewTag" style="width:100px"></td>
                <td>
                    <input class="easyui-passwordbox" iconWidth="28" id="PASSWORD_NEW" name="PASSWORD_NEW"
                           required="true" style="width:400px;height:34px;padding:10px" validType="complexity">
                </td>
            </tr>
            <tr>
                <td id="pwdRetype" style="width:100px"></td>
                <td>
                    <input class="easyui-passwordbox" iconWidth="28" name="PASSWORD_NEW_2"
                           required="true" style="width:400px;height:34px;padding:10px"
                           validType="equals['#PASSWORD_NEW']">
                </td>
            </tr>
        </table>
    </form>
</div>
<div id="modifyPwdBlg-btn">
    <a class="easyui-linkbutton" href="javascript:savePwd()" iconCls="icon-ok" id="savePwdBtn"></a>
    <a class="easyui-linkbutton" href="javascript:closePasswordModifyDialog()" iconCls="icon-no" id="closePwdSetBtn"></a>
</div>
<script src="/h5/js/wallbgcanvas.js" type="text/javascript"></script>
</body>
</html>
